关于更新发布CSS和JS文件的缓存问题

现现在，浏览器大战下，各个浏览器也是拼了命的提升性能，升级JS解析引擎，更好的处理浏览器的页面缓存，让用户的浏览体验更快，占用更小的PC资源。那么，问题就出如今JS和CSS缓存，甚至页面缓存上。至于浏览器对页面的缓存，咱们通常经过在服务端发送页面的时候设置页面的生存期，通常几个小时就能缓解很大的服务器压力，而且，对浏览者来说，本地页面晚更新几个小时可能问题也不大。但，问题是，若是页面发生了更新，可是该页面连接的JS和CSS文件却被浏览器缓存下来，只有待浏览器重启后才能被删除，甚至有些浏览器重启后也不主动删除JS和CSS的缓存文件。这样页面与JS和CSS文件就可能发生脱节了，从而出现某种异常现象，甚至页面崩溃。更坑爹的现象是，如今用户为了保存本身的工做（娱乐）状态，根本就长时间不关机，固然也不关闭浏览器。从而使得该问题变得更加严重。javascript

这里提供一种简单而且经常使用的JS和CSS的缓存解决方案。咱们看新浪微博的首页。css

新浪微博首页html

该页面加载完毕后的头部代码以下（使用Fiirbug等Ajax调试工具打开）：java

新浪微博HTML头部分代码程序员

注意上面的每一个JS文件和CSS文件都加上了一个时间戳做为版本号。浏览器

即缓存

服务器

或函数

由于浏览器缓存的时候是以URL做为存储单位（还记得POST页面的返回按钮的问题吧？），工具

从而当每次首页的文件发生更新的时候只须要更改上面的版本号，就能提醒浏览器从新下载该文件了。

若是修改了js文件中的js代码，发布代码到线上后。用户的浏览器使用的仍是原来js缓存。因此并不会立刻生效。

如何才能让浏览器使用最新的js文件呢？

不少人想到的第一反应是，在在后面加一个时间戳来解决。这样url地址每次变化，浏览器就会请求服务端的js，而不会使用缓存。

这样是解决了。可是会致使浏览器每次都要去请求服务端的js文件。占用带宽。做为技术，能不能有种更好的办法呢？既能避免用户的浏览器每次去请求服务端获取js文件。又能在发布新的js代码后，可以使用最新的js文件？

听说，在问号后面加版本号，如今不少网站都这么干。加个版本号可以解决问题吗？

 网上查询资料，纵观你们的解决思路总结以下：

一、修改js的文件名。我以为这样很麻烦。形成版本系统的维护困难。不建议。除非是彻底ftp。不过每次发布都修改文件名称。的确形成维护的时候很茫然，接手的人看到文件名称变化，会比较难维护

二、路径后面加时间戳或者随机数的方式。

 通常都是在html模版中使用一个时间戳或者随机数函数生成一个值。

今天和明天的值不一样了，从新请求服务器。

使用时间戳，每刷新一次html，值都不一样。随机数也是同样的

   不推荐使用这种方式。

   由于这样的方式致使的问题是，每次刷新html，时间戳都是变化的，url就老是惟一的，因而浏览器老是去请求服务端获取js文件，不会使用浏览器本地的缓存。占用带宽,影响速度

三、路径后面加js的版本号。这样是业界比较成熟的作法。

关键是这个版本号，怎么作版本？ 难道真的归入版本系统里面去？不是的。我忽然灵感来，想到一种程序员本身控制的办法。

本身主动加时间，若是本次发布，修改了哪几个js文件。那么就在后面加上一个时间点：年月日

若是一天会发布屡次对js文件的修改，那么程序员还要精确点。年月日时分秒便可。

 以下：

我去看了一下淘宝，发现也是这样一种方式额，不知道对不对？

以下：

 15年8月12日补充：

  公司有好几千万注册会员，因而第三方应用使用咱们网站会员账号实如今第三方网站登陆，须要设计oauth2.0受权的平台，因而须要参考微博的oauth体制。

  无心中发现他们的css也是使用年月日来控制

进一步思考：

这种加时间方法是可行。。不是系统生成的时间，不是全部js文件都加。

是否是能够进一步考虑一种办法，用程序来进行开关呢？

本身勾选。若是这个文件修改了。那么就设置为更新。模版中判断，就根据这个开关，把时间戳自动打上去？

不过这样子以为不必。由于还没到那么重大。其实初期，彻底能够程序手动把日期打上去便可了。

总结思路：

js文件的内容修改了,能够加个t参数代表一下日期,用这个日期来做为版本号，看到日期也能知道是哪天发布的。

没有修改js文件根本就不用修改日期。

实践：

若是下一次修改了这个js文件，那么发布的时候，就修改日期

没有修改的js文件，保留原来的值不动便可。